import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TopDownKeyValueWidget extends StatelessWidget {
  final String topText;
  final String downText;
  final TextStyle topTextStyle;
  final TextStyle downTextStyle;
  final EdgeInsets padding;
  final EdgeInsets margin;
  final CrossAxisAlignment crossAxisAlignment;
  final Color backgroundColor;
  final double space;

  const TopDownKeyValueWidget({
    Key? key,
    required this.topText,
    required this.downText,
    this.topTextStyle =
        const TextStyle(color: const Color(0xff999999), fontSize: 14),
    this.downTextStyle =
        const TextStyle(fontSize: 18, color: Color(0xff252525)),
    this.padding = const EdgeInsets.all(8.0),
    this.margin = const EdgeInsets.symmetric(vertical: 8.0),
    this.crossAxisAlignment = CrossAxisAlignment.start,
    this.backgroundColor = const Color(0xfff3f3f3),
    this.space = 4.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      margin: margin,
      child: Padding(
        padding: padding,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(topText, style: topTextStyle),
            SizedBox(height: space),
            Text(downText, style: downTextStyle),
          ],
        ),
      ),
    );
  }
}

class TopDownTextWidget extends StatelessWidget {
  final String topText;
  final String downText;
  final TextStyle? topTextStyle;
  final TextStyle? downTextStyle;
  final double space;
  final CrossAxisAlignment crossAxisAlignment;
  final VoidCallback? onTap;

  const TopDownTextWidget({
    Key? key,
    required this.topText,
    required this.downText,
    this.topTextStyle =
        const TextStyle(color: const Color(0xff999999), fontSize: 14),
    this.downTextStyle =
        const TextStyle(fontSize: 18, color: Color(0xff252525)),
    this.space = 4.0,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (onTap == null)
      return buildContent();
    else
      return InkWell(
        child: buildContent(),
        onTap: this.onTap,
      );
  }

  Widget buildContent() {
    return Column(
      crossAxisAlignment: crossAxisAlignment,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(topText, style: topTextStyle),
        SizedBox(height: space),
        Text(downText, style: downTextStyle),
      ],
    );
  }
}
